<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1011495_xriwcg2e6ch.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog2.css">
    <link rel="stylesheet" href="./css/checkout.css">
    <title>Order list</title>
    <script src="./js/common.js"></script>
    <script src="./js/jquery/jquery.min.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<body onload="init()">
<div class="container-fluid order-list">
    <div class="row header">
        <ul class="list-inline nav-tabs">
            <li><a href="javascript:history.back(-1);" data-toggle="tab-back"><i class="iconfont icon-left-line"></i>My Page</a></li>
        </ul>
    </div>
    <div class="row content mlr-16">
        <div class="header-title mb-10">History</div>
        <div class="order-list mt-24">
            <div class="order-item mt-25 pb-24">
                <div class="pro-img cell mr-15"><img src="./image/15.png" class="img-responsive"></div>
                <div class="pro-info cell pull-right">
                    <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                    <div class="pro-option mt-5">M01_듀이 로즈</div>
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Complated</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="delete pull-left"><i class="iconfont icon-shanchu"></i></div>
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="order-item mt-25 pb-24 many-product">
                <div class="pro-img-list ">
                    <ul class="list-inline swiper-container">
                        <li><img src="./image/15.png" class="img-responsive" ></li>
                        <li><img src="./image/16.png" class="img-responsive" ></li>
                        <li><img src="./image/17.png" class="img-responsive" ></li>
                        <li><img src="./image/18.png" class="img-responsive" ></li>
                        <li><img src="./image/19.png" class="img-responsive" ></li>
                    </ul>

                </div>
                <div class="next-prev">
                    <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>
                </div>
                <div class="pro-info cell pull-right">
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Pending</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="order-item mt-25 pb-24 many-product">
                <div class="pro-img-list ">
                    <ul class="list-inline">
                        <li><img src="./image/15.png" class="img-responsive" ></li>
                        <li><img src="./image/15.png" class="img-responsive" ></li>
                    </ul>
                </div>
                <div class="next-prev">
                    <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>
                </div>

                <div class="pro-info cell pull-right">
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Pending</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="order-item mt-25 pb-24 many-product">
                <div class="pro-img-list ">
                    <ul class="list-inline">
                        <li><img src="./image/15.png" class="img-responsive" ></li>
                        <li><img src="./image/16.png" class="img-responsive" ></li>
                    </ul>
                </div>
                <div class="next-prev">
                    <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>
                </div>

                <div class="pro-info cell pull-right">
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Shipped</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="btn-default-black pro-btn pull-left btn-confirm">
                            <span>Confirm Purchase</span>
                        </div>
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="order-item mt-25 pb-24">
                <div class="pro-img cell mr-15"><img src="./image/19.png" class="img-responsive"></div>
                <div class="pro-info cell pull-right">
                    <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>
                    <div class="pro-option mt-5">M01_듀이 로즈</div>
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Shipped</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="btn-default-black pro-btn pull-left btn-confirm">
                            <span>Confirm Purchase</span>
                        </div>
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="order-item mt-25 pb-24">
                <div class="pro-img cell mr-15"><img src="./image/17.png" class="img-responsive"></div>
                <div class="pro-info cell pull-right">
                    <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                    <div class="pro-option mt-5">M01_듀이 로즈</div>
                    <div class="pro-status mt-24">
                        <div class="order-status  pull-left">Complated</div>
                        <div class="order-date pull-right">2019-01-01</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="pro-warp mt-24">
                        <div class="delete pull-left"><i class="iconfont icon-shanchu"></i></div>
                        <div class="detail pull-right btn-default">
                            <span>Detail</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

    </div>

    <div class="row footer">
        <ul class="nav-tabs list-inline">
            <li><a href="index.html"><i class="iconfont icon-zhuye"></i></a></li>
            <li><a href="javascript:;"><i class="iconfont icon-39"></i></a></li>
            <li><a href="javascript:;"><i class="iconfont icon-cart"></i></a></li>
            <li><a href="javascript:;"><i class="iconfont icon-setting-chose"></i></a></li>
        </ul>
    </div>
</div>

</body>
<script>
    $(function () {

        $('body').on('click','.pro-warp .detail',function () {
            location.href = 'order-detail.html';
        })

        $('body').on('click','.footer .btn-shipping',function () {
            location.href = 'index.html';
        })

        $('body').on('click','.pro-warp .btn-confirm',function () {

            layer.msg('Confirmed your purchase <br>' +
                    'You got <span style="color: red">1.4</span> Payback Point!', {
                shadeClose: true,
                skin: 'layer-ext-myskin', //只对该层采用myskin皮肤
                title:'Payback Point',
                shade: 0.6,
                time: 0
                ,btn: ['Done']
                ,yes: function(index){

                    //ajax 更改订单状态
                    layer.close(index);
                }
            });
        })

        $('body').on('click','.order-item .delete',function () {
            var obj = $(this).parents('.order-item');
            layer.msg('Are you sure you want to delete?', {
                shade: 0.6,
                time: 0 //不自动关闭
                ,btn: ['Yes', 'No']
                ,yes: function(index){
                    obj.remove();
                    layer.close(index);
                }
            });
        })



        var html = '<div class="order-item mt-25 pb-24">\
                <div class="pro-img cell mr-15"><img src="./image/15.png" class="img-responsive"></div>\
                <div class="pro-info cell pull-right">\
                <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>\
        <div class="pro-option mt-5">M01_듀이 로즈</div>\
        <div class="pro-status mt-24">\
                <div class="order-status  pull-left">Complated</div>\
                <div class="order-date pull-right">2019-01-01</div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="pro-warp mt-24">\
                <div class="delete pull-left"><i class="iconfont icon-shanchu"></i></div>\
                <div class="detail pull-right btn-default">\
                <span>Detail</span>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="order-item mt-25 pb-24 many-product">\
                <div class="pro-img-list ">\
                <ul class="list-inline swiper-container">\
                <li><img src="./image/15.png" class="img-responsive" ></li>\
                <li><img src="./image/16.png" class="img-responsive" ></li>\
                <li><img src="./image/17.png" class="img-responsive" ></li>\
                <li><img src="./image/18.png" class="img-responsive" ></li>\
                <li><img src="./image/19.png" class="img-responsive" ></li>\
                </ul>\
                </div>\
                <div class="next-prev">\
                <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>\
                </div>\
                <div class="pro-info cell pull-right">\
                <div class="pro-status mt-24">\
                <div class="order-status  pull-left">Pending</div>\
                <div class="order-date pull-right">2019-01-01</div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="pro-warp mt-24">\
                <div class="detail pull-right btn-default">\
                <span>Detail</span>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="order-item mt-25 pb-24 many-product">\
                <div class="pro-img-list ">\
                <ul class="list-inline">\
                <li><img src="./image/15.png" class="img-responsive" ></li>\
                <li><img src="./image/15.png" class="img-responsive" ></li>\
                </ul>\
                </div>\
                <div class="next-prev">\
                <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>\
                </div>\
                <div class="pro-info cell pull-right">\
                <div class="pro-status mt-24">\
                <div class="order-status  pull-left">Pending</div>\
                <div class="order-date pull-right">2019-01-01</div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="pro-warp mt-24">\
                <div class="detail pull-right btn-default">\
                <span>Detail</span>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="order-item mt-25 pb-24 many-product">\
                <div class="pro-img-list ">\
                <ul class="list-inline">\
                <li><img src="./image/15.png" class="img-responsive" ></li>\
                <li><img src="./image/16.png" class="img-responsive" ></li>\
                </ul>\
                </div>\
                <div class="next-prev">\
                <a href="order-detail.html"><i class="iconfont icon-right-line"></i></a>\
                </div>\
                <div class="pro-info cell pull-right">\
                <div class="pro-status mt-24">\
                <div class="order-status  pull-left">Shipped</div>\
                <div class="order-date pull-right">2019-01-01</div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="pro-warp mt-24">\
                <div class="btn-default-black pro-btn pull-left btn-confirm">\
                <span>Confirm Purchase</span>\
        </div>\
        <div class="detail pull-right btn-default">\
                <span>Detail</span>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="order-item mt-25 pb-24">\
                <div class="pro-img cell mr-15"><img src="./image/19.png" class="img-responsive"></div>\
                <div class="pro-info cell pull-right">\
                <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>\
        <div class="pro-option mt-5">M01_듀이 로즈</div>\
        <div class="pro-status mt-24">\
                <div class="order-status  pull-left">Shipped</div>\
                <div class="order-date pull-right">2019-01-01</div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="pro-warp mt-24">\
                <div class="btn-default-black pro-btn pull-left">\
                <span>Confirm Purchase</span>\
        </div>\
        <div class="detail pull-right btn-default">\
                <span>Detail</span>\
                </div>\
                <div class="clearfix"></div>\
                </div>\
                </div>\
                <div class="clearfix"></div>\
                </div>';

        //滚动条到页面底部加载更多案例
        $(window).scroll(function(){

            var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
            var scrollHeight = $(document).height();   //当前页面的总高度
            var clientHeight = $(this).height();    //当前可视的页面高度
            // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
            if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
               $('.content .order-list').append(html);
            }
        });

    })

    function init(){
        var len = 60;
        $('.pro-info .pro-name').each(function(){
            var content = $(this).html();
            var html = content.substring(0,len);
            var html2 = content.length>len?"...":"";
            this.innerHTML = html+html2;
        });

    }
</script>
</html>